<template>
	<view class="content">
		<view class="top">
			<view class="top-name">{{ classDetail.course_title }}</view>
			<view class="top-info">
				上课时段：{{ classDetail.teach_start_day | course_time_filter }}-{{ classDetail.teach_end_day | course_time_filter }}
			</view>
			<view class="top-info">&nbsp;</view>
		</view>
		<view class="title">
			<view class="title-item" :class="titleIndex == index ? 'title-item-active' : ''" v-for="(item, index) in titleList" :key="index" @tap="titleNav(index)">
				<view class="title-name">
					{{ item }}
				</view>
			</view>
		</view>
		<view class="list" v-if="titleIndex == 0">
			<view class="list-item" v-for="(item, index) in outlineList" :key="index">
				<view class="list-item-info">
					<view class="list-item-index">
						第{{ index + 1 }}课
						<text v-if="item.course_service_type != 2">丨{{ item.start_time | course_time_filter }} {{ item.start_time | course_time_filter('HH:mm') }}-{{ item.end_time | course_time_filter('HH:mm') }}</text>
						丨{{ item.course_service_type | course_type_filter }}丨{{ item.teacher_name }}
					</view>
					<view class="list-item-name">{{ item.detail_title }}</view>
				</view>
				<!-- 家长端限制进入直播，功能暂时不开放 -->
				<view class="list-item-icon">
					<view v-if="item.begin == 0"><i class="iconfont iconshipinziyuan"></i></view>
					<view v-if="item.begin == 1" class="list-item-begin">正在直播</view>
					<view v-if="item.begin == 2">未开始</view>
					<view v-if="item.begin == 3">已结束</view>
				</view>
			</view>
		</view>
		<view class="comment" v-if="titleIndex == 1">
			<view class="comment-none" v-if="recommendList.length == 0">
				<image src="../../static/image/lesson-none1.png"></image>
				<view class="comment-none-text">暂无评论~</view>
			</view>
			<view class="comment-item" v-for="(item, index) in recommendList" :key="index">
				<v-discuss :item="item"></v-discuss>
			</view>
		</view>
		<view class="teacher" v-if="titleIndex == 2">
			<view class="teacher-item" v-for="(item, index) in teacherList" :key="index">
				<lesson-teacher :item="item" :disableUrl="true"></lesson-teacher>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import lessonTeacher from '../free-lesson/components/lesson-teacher';
import vDiscuss from '../free-lesson/components/discuss';
var _this;
export default {
	components: {
		uniRate,
		lessonTeacher,
		vDiscuss
	},
	data() {
		_this = this;
		return {
			course_id: 2,
			classDetail: {
				name: '2019语文中考必备复习方法',
				startDate: '5.24',
				endDate: '7.20',
				interval: '每天',
				startTime: '15:00',
				endTime: '17:00',
				len: '1年',
				score: 4.7
			},
			titleList: ['课程大纲', '课程评价', '授课老师'],
			titleIndex: 0,
			outlineList: [],
			recommendList: [],
			course_isMore: false,
			teacherList: []
		};
	},
	onLoad(e) {
		var flag = 3;	// 控制加载遮罩
		uni.showLoading()
		_this.course_id = +e.course_id
		_this.$zbapi.apiPost(`parent/course/info/${_this.course_id}`).then(res => {
			console.log('finish get detail');
			if (res.data.code == 0) {
				// 映射授课教师列表
				_this.teacherList = res.data.data.teacher_list.map(x => ({
					t_id: x.teacher_id,
					t_avatar: x.figureimg,
					t_name: x.teacher_name,
					t_tags: x.impression || ' ',
					t_seria: x.certificate_no || '教师资格证编号：无'
				}));
				_this.classDetail = res.data.data
			}
			!--flag && uni.hideLoading()
		});
		// 获取课程学员评价
		_this.$zbapi.apiPost(`parent/course/commentlist/infos/${_this.course_id}`, {}).then(res=>{
			if (res.data.code == 0) {
				_this.recommendList = res.data.data.list ? res.data.data.list.map(x=>({
					id: x.student_id,	// 学生id
					name: x.student_name,		// 学生名
					score: x.score,		// 评分
					avatar: x.headimg,	// 头像
					time: new Date() - x.create_time*1000,		// 评论时间
					comment: x.comment		// 评价内容
				})) : []
			}
			!--flag && uni.hideLoading()
		})
		// 获取课程大纲
		_this.$zbapi.apiPost(`parent/course/outline/infos/${_this.course_id}`, {}).then(res=>{
			if (res.data.code == 0) {
				_this.outlineList = res.data.data.map(x=>({
					// 判断开始时间，课程状态
					...x,
					begin: x.start_time * 1000 < +new Date() ?	// 已开始
								x.end_time * 1000 < +new Date() ? 	// 已结束 
									x.course_service_type == 1 ?	// 是否直播
										3 : 0 : 1 : 2
				}));
			}
			!--flag && uni.hideLoading()
		})
	},
	filters: {
		// 课程时间格式化
		course_time_filter(val, format){
			if(!val) return ''
			return new Date(val * 1000).format(format || 'MM.dd')
		},
		// 获取课程类型
		course_type_filter(val){
			return val == 2 ? '录播' : '直播'
		}
	},
	methods: {
		titleNav(index) {
			this.titleIndex = index;
		},
		navTo(type, outline_id, index) {
			var url;
			switch (type) {
				case 0:
					url = './classRoom';
					break;
				case 1:
					url = './classRoom';
					break;
				case 2:
					url = '';
					uni.showToast({title: "课程未开始~", icon: 'none'})
					break;
				case 3:
					url = '';
					uni.showToast({title: "直播已结束~", icon: 'none'})
			}
			url && uni.setStorage({
				key: 'outlineList',
				data: _this.outlineList,
				success() {
					uni.navigateTo({
						url: url + '?current_outline=' + index
					});					
				}
			})
		}
	}
};
</script>

<style>
page {
	background: #f7f7f7;
}
v-cloak{display: none;}
/* 顶部课程基本信息 */
.top {
	width: calc(100% - 60upx);
	background: #ffffff;
	padding: 40upx 30upx;
	/* position: fixed; */
	/* top: 88upx; */
	left: 0;
	z-index: 1;
}
.top-name {
	color: #333333;
	font-size: 36upx;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.top-info {
	color: #666666;
	font-size: 26upx;
}
/* 中间选项卡 */
.title {
	width: 100%;
	height: 90upx;
	background: #ffffff;
	display: flex;
	align-items: center;
	/* position: fixed; */
	/* top: 300upx; */
	left: 0;
	z-index: 1;
	border-top: 10upx solid #f7f7f7;
}
.title-item {
	width: 33.3%;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.title-name {
	color: #666666;
	font-size: 32upx;
	line-height: 86upx;
}
.title-item-active .title-name {
	color: #fe9900;
	font-size: 36upx;
	font-weight: bold;
}
.title-item-active:after {
	content: '';
	width: 200upx;
	height: 4upx;
	background: #fe9900;
}
/* 课程列表 */
.list {
	width: calc(100% - 60upx);
	margin: 0 30upx 30upx;
	background: #ffffff;
	border-radius: 20upx;
	position: absolute;
	top: 277upx;
}
.list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx;
	border-top: 2upx solid #e5e5e5;
}
.list-item:first-child {
	border: none;
}
.list-item-info {
	width: 85%;
}
.list-item-index {
	color: #999999;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.list-item-name {
	color: #333333;
	font-size: 34upx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-item-icon {
	text-align: center;
	width: 104upx;
}
.list-item-icon view {
	color: #cccccc;
	font-size: 26upx;
	white-space: nowrap;
}
.list-item-icon i {
	color: #999999;
	font-size: 40upx;
}
.list-item-begin {
	color: #fe9900 !important;
	font-size: 26upx;
}
/* 评论列表 */
.comment {
	margin: 0 30upx;
	width: calc(100% - 60upx);
	position: absolute;
	top: 277upx;
}
.comment-none {
	width: 100%;
	text-align: center;
	margin-top: 150upx;
}
.comment-none image {
	width: 320upx;
	height: 200upx;
}
.comment-none-text {
	color: #999999;
	font-size: 38upx;
	margin-top: 20upx;
}
.comment-item {
	background: #ffffff;
	border-radius: 20upx;
	display: flex;
	margin-bottom: 20upx;
}
.comment-item-avatar {
	width: 70upx;
	height: 70upx;
}
.comment-item-avatar image {
	width: 70upx;
	height: 70upx;
	border-radius: 50%;
}
.comment-item-info {
	width: calc(100% - 90upx);
	margin-left: 20upx;
}
.comment-item-name {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.comment-item-name-info {
	color: #666666;
}
.comment-item-name-info text {
	color: #cccccc;
	margin-left: 16upx;
}
.comment-item-cont {
	color: #333333;
	font-size: 34upx;
}
/* 教师列表 */
.teacher {
	margin: 0 30upx;
	width: calc(100% - 60upx);
	position: absolute;
	top: 277upx;
}
.teacher-item {
	background: #ffffff;
	border-radius: 20upx;
	display: flex;
	align-items: center;
	margin-bottom: 20upx;
}
.teacher-item-avatar {
	width: 120upx;
	height: 120upx;
}
.teacher-item-avatar image {
	width: 120upx;
	height: 120upx;
	border-radius: 50%;
}
.teacher-item-info {
	margin-left: 20upx;
}
.teacher-item-name {
	color: #666666;
}
.teacher-item-name text {
	color: #333333 !important;
	font-size: 36upx !important;
}
.teacher-item-cont {
	color: #999999;
	white-space: nowrap;
}
.teacher-item-icon {
	color: #999999;
}
</style>
